<template>
  <div class="hello">
    <!-- 第2行 -->
    <div class="row row1">
      <div class="grid width25" v-for="(top,key,index) in topData" v-if=" key != 'SFINV0007I'" :key="index">
        <div class="center">
          <dl class="economy-data">
            <dt>{{ top[0].name }}</dt>
            <dd>{{ top[0].value }}</dd>
          </dl>
        </div>
      </div>
    </div>
    <!-- 第2行 -->
    <div class="row row2">
      <div class="grid width25">
        <div class="grid-title">对外投资企业区域分布</div>
        <div class="grid-body">
          <div id="chinamaps" style="width:100%; height:100%"></div>
        </div>
      </div>
      <!-- 圈图 -->
      <div class="grid width40">
        <div class="grid-title">融资企业所处轮次</div>
        <div class="grid-body">
          <div id="valTimes" style="width:100%; height:100%"></div>
        </div>
      </div>
      <div class="grid width35">
        <div class="grid-title">融资企业行业分布</div>
        <div class="grid-body">
          <div id="pieKinds" style="width:100%; height:100%"></div>
        </div>
      </div>
    </div>
    <!-- 第3行 -->
    <div class="row row3">
      <div class="grid width25">
        <div class="grid-title">对外投资企业行业分布</div>
        <div class="grid-body">
          <div id="bargrid" style="width:100%; height:100%"></div>
        </div>
      </div>
      <div class="grid width40">
        <div class="grid-title">各轮次融资事件数</div>
        <div class="grid-body">
          <div class="val-event" v-for="(event,index) in topData['SFINV0007I']" v-if="!loading" :key="index">
            <div class="width30 val-item">
              <span>{{ event.name }}</span>
            </div>
            <div class="width40 val-item">      
              <div :id="'abar'+ index" style="width:100%; height:16px"></div>
            </div>
            <div class="width20 val-item">
              <span>{{ event.value }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--  多Y轴 -->
      <div class="grid width35">
        <div class="grid-title">各季度融资情况</div>
        <div class="grid-body">
          <div id="linebar1" style="width:100%; height:100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');
require('echarts/lib/component/title');
require('echarts/lib/component/grid');
require('echarts/lib/component/legendScroll');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/map/js/china')
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      economyUrl: state => state.Economy.economyUrl,
      topData: state => state.Economy.topData,
      loading: state => state.Economy.loading
    })
  },
  created() {
    this.loadEco(this.economyUrl);
  },
  mounted: function () {
    this.circlePie('valTimes');
    this.pieArea('pieKinds');
    this.pieArea('bargrid');
    this.chinaMap('chinamaps');
    //多Y轴
    this.drawBarLine('linebar1');
    //柱状对比图

    setTimeout(() => {
    this.drawBar('abar0', ['100'], 50, '#1cd389');
    this.drawBar('abar1', ['100'], 20, '#668eff');
    this.drawBar('abar2', ['100'], 80, '#ffc751');
    this.drawBar('abar3', ['100'], 90, '#ff6e73');
    this.drawBar('abar4', ['100'], 50, '#4162ff');      
    }, 500);
   

    // this.barMore();

  },
  methods: {
    ...mapActions([
      'loadEco'
    ]),
    drawBar(id, max, d, colors) {
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        xAxis: [{
          type: 'value',
          show: false
        }],
        yAxis: [{
          type: 'category',
          show: false,
        }],
        series: [{
          name: '现实 ',
          type: 'bar',
          barWidth: 10,
          silent: true,
          itemStyle: {
            normal: {
              color: '#1d1d1d',
              barBorderRadius: 30,
            }
          },
          barGap: '-100%',
          barCategoryGap: '50%',
          data: max,
        }, {
          name: ' 理想',
          type: 'bar',
          barWidth: 10,
          data: [{
            value: d,
            itemStyle: {
              normal: {
                color: colors,
                barBorderRadius: 30,
              }
            }
          }]
        }]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawBarLine(id) {
      let getid = document.getElementById(id)
      let myChart = echarts.init(getid);
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        legend: {
          data: ['蒸发量', '降水量', '平均温度'],
          textStyle: { //图例文字的样式
            color: '#ccc',
            fontSize: 12
          },
          icon: ['pin'] //legend图标
        },
        xAxis: [{
          type: 'category',
          data: ['1月', '2月'],
          axisLine: {
            lineStyle: { //x轴颜色
              color: '#ccc',
              width: 1, //这里是为了突出显示加上的
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            show: true,
            textStyle: {
              color: '#ccc'
            },
          },
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: '{value} ml',
            interval: 0,
            show: true,
            textStyle: {
              color: '#ccc'
            },
          },
          axisLine: {
            lineStyle: { //x轴颜色
              color: '#ccc',
              width: 1, //这里是为了突出显示加上的
            }
          },
        }, {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: '{value} °C',
            interval: 0,
            show: true,
            textStyle: {
              color: '#ccc'
            }
          },
          axisLine: {
            lineStyle: { //x轴颜色
              color: '#ccc',
              width: 1, //这里是为了突出显示加上的
            }
          },
        }],
        series: [{
          name: '蒸发量',
          type: 'bar',
          barWidth: 30, //柱图宽度
          data: [2.0, 4.9],
          itemStyle: {
            normal: {
              color: '#6f7ffa' //紫色
            }
          },
        }, {
          name: '降水量',
          type: 'line',
          data: [2.6, 5.9],
          itemStyle: {
            normal: {
              color: '#de467f' //红色
            }
          },
        }, {
          name: '平均温度',
          type: 'line',
          yAxisIndex: 1,
          data: [2.0, 2.2],
          itemStyle: {
            normal: {
              color: '#2a75ff'
            }
          },
        }]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    circlePie(id) { //嵌套饼图
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        // backgroundColor: '#424956',
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['42%', '55%'],
          color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],
          label: {
            normal: {
              formatter: '{b}\n{d}%'
            },
          },
          data: [{
            value: 435,
            name: '2D线'
          }, {
            value: 679,
            name: '3D线'
          }, {
            value: 848,
            name: '资源类'
          }, {
            value: 348,
            name: '采集类'
          }, {
            value: 679,
            name: '宝宝大全'
          }, {
            value: 848,
            name: '2D视频'
          }, {
            value: 348,
            name: '3D视频'
          }]
        }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    pieArea(id) {
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        color: ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', '#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea',],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '云盾' },
            { value: 310, name: '百度云加速' },
            { value: 234, name: '360' },
            { value: 135, name: '其他' },
            { value: 1548, name: '加速乐' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      }
    },
    chinaMap(id) { //地图
      let myChart = echarts.init(document.getElementById(id));
      let data1 = [{
        name: '海门',
        value: 9
      }, {
        name: '鄂尔多斯',
        value: 12
      }, {
        name: '招远',
        value: 12
      }, {
        name: '舟山',
        value: 12
      }];
      let data2 = [{
        name: '齐齐哈尔',
        value: 14
      }, {
        name: '盐城',
        value: 15
      }, {
        name: '赤峰',
        value: 16
      }, {
        name: '青岛',
        value: 18
      }, {
        name: '乳山',
        value: 18
      }, {
        name: '金昌',
        value: 19
      }, {
        name: '泉州',
        value: 21
      }, {
        name: '莱西',
        value: 21
      }, {
        name: '日照',
        value: 21
      }, {
        name: '郑州',
        value: 21
      }];
      let data3 = [{
        name: '南通',
        value: 20
      }, {
        name: '拉萨',
        value: 24
      }, {
        name: '云浮',
        value: 24
      }, {
        name: '梅州',
        value: 25
      }, {
        name: '深圳',
        value: 25
      }, {
        name: '香港',
        value: 25
      }, {
        name: '海口',
        value: 25
      }, {
        name: '信阳',
        value: 25
      }];
      var geoCoordMap = {
        '海门': [121.15, 31.89],
        '鄂尔多斯': [109.781327, 39.608266],
        '招远': [120.38, 37.35],
        '舟山': [122.207216, 29.985295],
        '齐齐哈尔': [123.97, 47.33],
        '盐城': [120.13, 33.38],
        '赤峰': [118.87, 42.28],
        '青岛': [120.33, 36.07],
        '武汉': [114.31, 30.52],
        '大庆': [125.03, 46.58],
        '香港': [114.1604896100, 22.2780757700],
        '信阳': [114.0993041920, 32.1530713091]
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var pointSize = 20;
      var option = {
        backgroundColor: '#242428',
        title: {
          left: 'center',
          textStyle: {
            color: '#e0e6ef'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          // data: ['慢', '中', '快'],
          // textStyle: {
          //     color: '#fff'
          // }
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            }
          },
          regions: [{ name: '南海诸岛', value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } } } }], //去掉南海群岛
          roam: false, //禁止拖动
          itemStyle: {
            normal: {
              areaColor: '#006CDC', //区域颜色
              borderColor: '#aaa' //区域划分边框颜色
            },
            emphasis: {
              areaColor: '#1ba6ec' //鼠标Havor颜色
            }
          }
        },
        series: [{
          name: '服务中',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data1),
          symbolSize: pointSize,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'top',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#4acdae',
              shadowBlur: 10,
              shadowColor: 'black'
            }
          },
          zlevel: 1
        }, {
          name: '访问缓慢',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data2),
          symbolSize: pointSize,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'top',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ffcc00',
              shadowBlur: 10,
              shadowColor: 'black'
            }
          },
          zlevel: 1
        }, {
          name: '服务器异常',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data3),
          symbolSize: pointSize,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'top',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ff3300',
              shadowBlur: 10,
              shadowColor: 'black'
            }
          },
          zlevel: 1
        }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    barMore(id){
      var real = true;
      var datas = {
          chartData: ["86.18", "16.18", "25.95", "3.45", "0.23", "25.95", "3.45", '32.32', "84.23"],
          realCost: ["0.8618", "0.1618", "0.2595", "0.0345", "0.0023", "0.2595", "0.0345", "0.3232", "0.8423"],
          cost: ["1", "0.17", "0.17", "0.05", "0", "0.17", "0.05", "0"],
          grade: ["(1,10]", "[10,20]", "[10,30]", "[30,140]", "[40,50]", "[50,60]", "[60,70]", "[70,80]", "[80,90]"],

          toolData: ["314", "53", "52", "15", "1", "52", "15", "1", "1"],
          totalCost: [1, 1, 1, 1, 1, 1, 1, 1, 1]
      };
var option = {

    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            var tpl = "",
                index = params.dataIndex,
                cd = datas.chartData,
                cn = datas.toolData;
            tpl = params.name + ': ' + dbcMethods.dformat(cn[index]) + ' 占比: ' + cd[index] + '% ';
            return tpl;
        }
    },
    xAxis: {
        show: false,
    },
    yAxis: {
        inverse: true,
        type: 'category',
        axisLabel: {
            show: true,
            color: '#666',
            fontSize: 12,
            padding: [0, 20, 0, 0]
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        data: datas.grade,
    },
    series: [{
        type: 'bar',
        barGap: '-100%',
        barWidth: '7',
        z: 1,
        data: datas.totalCost,
        label: {
            normal: {
                show: true,
                position: 'right',
                color: '#666',
                fontSize: 12,
                offset: [30, 0],
                formatter: function(param) {
                    var dd = datas.chartData;
                    return dd[param.dataIndex] + '%';
                },
            }
        },
        itemStyle: {
            emphasis: {
                color: 'eee'
            },
            normal: {
                color: '#eee',
            }
        },
    }, {
        type: 'bar',
        barWidth: '7',
        z: 2,
        data: real ? datas.realCost : datas.cost,
        itemStyle: {
            normal: {
                barBorderRadius: 16,
                color: '#68b837'
            },
        },
        max: 1
    }]
}

myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      }

    }
  }
}

</script>
<style lang="scss" scoped>
.val-item {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.val-event {
  height: 20%;
  display: flex;
  span {
    padding: 0 10%;
  }
}

.economy-data {
  dt {
    font-size: 1.125rem;
    color: #898989;
  }
  dd {
    font-size: 2.25rem;
    color: #fff;
  }
}

.row1 {
  height: 25%;
}

.row2 {
  height: 37.5%;
}

.row3 {
  height: 37.5%;
}

.company-val {
  ul {
    li {
      float: left;
      list-style: none;
      text-align: center;
      line-height: 4;
    }
  }
}

.data-word {
  dt {
    color: #898989;
  }
  dd {
    font-size: 1.5625rem;
    text-align: center;
  }
}
</style>